<template>
   <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="aside">
        <mentLayout></mentLayout>
      </el-aside>
      <el-container class="main">
        <el-header class="header">
          <menuTop></menuTop>
        </el-header>
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import mentLayout from '@/components/menu-layout.vue'
import menuTop from '@/components/menu-top.vue'
</script>

<style scoped>
.common-layout{
   width: 100%;
  height: 100%;
}
.el-container{
  width: 100%;
  height: 100%;
}
.aside{
  height: 100%;
  background-color: #121e41;
}
.main{
  width: 100%;
  height: 100%;
  background-color: #f5f6f8;
}
.header{
  height: 50px;
  background-color: #fff;
  margin-bottom: 20px;
}
.main-content{
  width: 100%;
  height: calc(90% - 50px);
  padding-left: 10px;
  background-color: #f5f6f8;
}
</style>
